<template>
  <div class="order">
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <van-tabs
      v-model="active"
      swipeable
      @click="getOrder(active)"
      title-active-color="#CC9145"
    >
      <van-tab
        class=""
        v-for="(item, index) in tabs"
        :key="index"
        :title="item"
      >
        <div class="goodsBox" v-for="(o, k) in orderList" :key="o.oid">
          <div v-show="o.status == 1" class="infoTop">
            <div class="orderId">{{ o.oid }}</div>
            <div class="receipt" @click="receipt(o.oid, k)">确认收货</div>
          </div>
          <div v-show="o.status == 2" class="infoTop">
            <div class="orderId">{{ o.oid }}</div>
            <div>
              <span class="receipt">已完成</span>
              <van-icon
                class="remove"
                name="delete-o"
                size="16"
                @click="removeOrder(o.oid, k)"
              />
            </div>
          </div>
          <div class="item">
            <ItemList v-for="(v, i) in o.list" :key="i" :item="v"></ItemList>
          </div>
          <div class="infoBottom">
            <div class="time">{{ o.date }}</div>
            <div class="total">
              <span>共记 {{ o.count }} 件</span>
              <span class="totalPrice">合计 &yen;{{ o.total }}.00</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import "../assets/less/order.less";
import ItemList from "../components/ItemList.vue";
export default {
  name: "Order",
  data() {
    return {
      tabs: ["全部", "进行中", "已完成"],
      active: 1,
      orderList: [],
    };
  },
  components: {
    ItemList,
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    removeOrder(oid, index) {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "POST",
        url: "/removeOrder",
        data: {
          appkey: this.appkey,
          tokenString,
          oid,
        },
      })
        .then((res) => {
        //   console.log("res removeOrder ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (res.data.code === 90000) {
            this.orderList.splice(index, 1);
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    receipt(oid, index) {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "POST",
        url: "/receive",
        data: {
          appkey: this.appkey,
          tokenString,
          oid,
        },
      })
        .then((res) => {
          console.log(this.active);
          console.log("res receipt ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (res.data.code == 80000) {
            if (this.active === 1) {
              this.orderList.splice(index, 1);
            }
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    getOrder(active) {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "GET",
        url: "/findOrder",
        params: {
          appkey: this.appkey,
          tokenString,
          status: active,
        },
      })
        .then((res) => {
          // console.log(this.active)
          // console.log("res getOrder ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 70000) {
            let oids = [];
            let goodsList = [];
            res.data.result.forEach((ele) => {
              if (oids.indexOf(ele.oid) === -1) {
                let order = {
                  oid: ele.oid,
                  date: ele.updatedAt,
                  status: ele.status,
                  count: 0,
                  total: 0,
                  list: [],
                };
                oids.push(ele.oid);
                goodsList.push(order);
              }
            });
            goodsList.forEach((val) => {
              res.data.result.forEach((item) => {
                if (val.oid === item.oid) {
                  val.list.push(item);
                  val.count += item.count;
                  val.total += item.count * item.price;
                }
              });
            });
            this.orderList = goodsList;
            // console.log('this.orderList==>',this.orderList);
            // console.log('oids==>',oids);
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
  created() {
    this.getOrder(1);
  },
};
</script>

<style lang="less" scoped>
</style>